<template>
    <div v-loading="loading" style="width: 100%">
        <SavePage :title="pageDisabled ? `${taskNumber}-记录结果` : `涵洞经常性巡查记录表`">
            <template v-if="pageDisabled" slot="title">
                <span>巡查类型：涵洞经常性检查</span>
            </template>
            <template slot="buttons">
                <BaseButton :loading="submitLoading" @click="handleSubmit">保存</BaseButton>
            </template>
            <template slot="body">
                <TitleTips v-if="pageDisabled" title="涵洞（通道）经常性检查记录表" :required="true" />
                <!-- 基础表单信息 -->
                <FormInfo ref="formInfo" :road.sync="highwayCode" :stake.sync="stake" :page-disabled="pageDisabled"></FormInfo>
                <!-- 缺陷卡片信息 -->
                <CardList ref="cardList" :road="highwayCode" :stake="stake"></CardList>
            </template>
        </SavePage>
    </div>
</template>

<script>
import { LocationOptions } from '@/views/maintenance-decision/constants'
import { InspectionRecordModel } from '@/models'
import CardList from './CardList.vue'
import FormInfo from '../components/FormInfo.vue'

export default {
    name: 'AddCulvertTask',
    components: {
        CardList,
        FormInfo
    },
    data() {
        return {
            model: new InspectionRecordModel(),
            loading: false,
            submitLoading: false,
            taskNumber: '',
            locationOptions: LocationOptions,
            deviceDialogVisible: false,
            cardList: [{}],
            highwayCode: '',
            stake: '',
        }
    },
    computed: {
        pageDisabled() {
            return !(this.$route.query.pageType === 'record')
        }
    },
    created() {
        // 合并url上传递的参数
        this.taskNumber = this.$route.query.taskNumber
    },
    methods: {
        async handleSubmit() {
            this.submitLoading = true
            // 基础表单验证结果
            const formInfoValidate = await this.$refs.formInfo.handleValidate()
            // 缺陷卡片验证结果
            const cardListValidate = await this.$refs.cardList.handleValidate()
            if (formInfoValidate && cardListValidate) {
                const formInfoData = this.$refs.formInfo.form
                const cardListData = this.$refs.cardList.getData()
                const data = {
                    ...formInfoData,
                    deptIds: formInfoData.deptIds.toString(),
                    inspectUsers: formInfoData.inspectUsers.toString(),
                    resultContent: cardListData
                }
                console.log(data)
                this.model
                    .saveOrUpdate(data)
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '操作成功！',
                            duration: 500,
                            onClose: () => {
                                this.$router.go(-1)
                            }
                        })
                    })
                    .finally(() => {
                        this.submitLoading = false
                    })
            } else {
                this.submitLoading = false
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.spe-item {
    ::v-deep {
        .el-form-item__label {
            text-align: center;
            padding: 0;
            &::before {
                display: none;
            }
        }
        .el-input,
        .el-input__inner {
            min-width: auto !important;
        }
    }
}
</style>
